import React from 'react';
import { Row, Col, Form } from 'antd';
import List from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import FormItem from '../../../components/FormItem';
import DeptSelect from '../../../components/DeptSelect'
import { connect } from 'react-redux';
import storage from '../../../utils/storage'

class AllUser extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'allUser';
    this.listsComponent = List;
    this.queryParams = {};
    this.queryPanigation = {
      current_page: 1,
      page_size: 10
    };
    this.model_width = 500;
  }
  componentDidMount() {}

  deptChange() {
    this.updatePanagaition(this.initQueryPanigation);
    this.freshQueryList();
  }

  freshQueryList = () => {
    const dept_id = this.props.form.getFieldValue('dept_id') === -1
      ? 0 : this.props.form.getFieldValue('dept_id')
        ? this.props.form.getFieldValue('dept_id') : storage.dept
    this.queryList({ ...this.queryParams, ...this.queryPanigation, dept_id });
  }

  reset() {
    this.props.form.setFieldsValue({ dept_id: this.props.dept_id })
  }

  render() {
    const ListsComponent = this.listsComponent;
    const formItems = [
      DeptSelect({
        deptTree: this.props.depts, // 全部部门数据
        deptArr: this.props.dept_id, // 当前部门数据
        name: 'dept_id',
        placeholder: '请选择部门',
        needLable: false,
        allowClear: false,
        onChange: this.deptChange.bind(this)
      })
    ]
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入用户名|邮箱|手机号进行搜索'
      }
    ];
    return (
      <div>
        <Row type='flex' justify='end'>
          {formItems.map((item) => {
            return (
              <Col span={8} key={item.name}>
                <FormItem form={this.props.form} item={item} colNum={1} />
              </Col>
            );
          })}
          <FilterTool
            data={data}
            colNum={3}
            query={this.freshQueryList}
            refreshFilter={this.refreshFilter}
            isOnChange={true}
            refresh={this.resetList}
            reset={this.reset.bind(this)}
          />
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
            rowKey='id'
          />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    depts: state.global.depts,
    dept_id: state.global.dept_id
  };
}

export default Form.create()(connect(mapStateToProps)(AllUser));
